<template>
  <div id="app">
    <p>click {{count}}， count is {{oddOrEven}}</p>
    <button @click="increase">+</button>
    <button @click="decrease">-</button>
    <button @click="increaseIfOdd">increment if odd</button>
    <button @click="increaseAsync">increment if async</button>
  </div>
</template>

<script>
  import {mapActions, mapGetters, mapState} from "vuex";

export default {
  name: 'App',
  methods: {
    // //增加+1
    // increase: function () {
    //   //调用dispatch()去触发actions
    //   this.$store.dispatch('increase');
    // },
    // //减少-1
    // decrease: function () {
    //   //调用dispatch()去触发actions
    //   this.$store.dispatch('decrease')
    // },
    // //如果是奇数，则+1变为偶数
    // increaseIfOdd: function () {
    //   //调用dispatch()去触发actions
    //   this.$store.dispatch('increaseIfOdd');
    // },
    // increaseAsync: function () {
    //   //调用dispatch()去触发actions
    //   this.$store.dispatch('increaseAsync')
    // }

    //以上代码等价于
    ...mapActions(['increase', 'decrease', 'increaseIfOdd', 'increaseAsync'])

  },
  computed: {
    ...mapState(['count']),
    ...mapGetters(['oddOrEven'])
  }
}
</script>

<style scoped>

</style>
